<template>
    <div class="filter">
        <el-row class="header">
            <span class="title-medium text-importent">病理切片</span>
            <span class="grid" @click="switchState">
                <i class="el-icon-s-grid"></i>
            </span>
        </el-row>
        <el-row class="header" v-show="isShow == false">
            <el-col
                style="margin-top: 20px; margin-right: 20px; width: 361px"
                v-for="(file, index) in pathologyFiles"
                :key="index"
            >
                <el-card :body-style="{ padding: '20px' }">
                    <el-row>
                        <div style="display: flex;position: relative;">
                            <img
                                :src="ImageServiceURL + file.labelUrl"
                                class="image"
                                @click="imagePinwheel($event,index,file.deg)"
                                :ref="'imgLabel'+index"
                            />
                        
                            <img
                                :src="ImageServiceURL + file.previewUrl"
                                class="image"
                                @click="exclude(file)"
                            />
                            <div
                              :class="[
                                file.isAi == '0' ? 'greyStatus' : '',
                                file.isAi == '1' ? 'greenStatus' : '',
                                file.isAi == '2' ? 'redStatus' : '',
                            ]"
                              class="colorStatus"></div>
                        </div>
                    </el-row>
                    <el-row class="line-text">
                        <span>切片标签：{{ file.sliceLabel }}</span>
                    </el-row>
                    <el-row class="line-text">
                        <span>切片类别：{{ file.sliceCategoryName }}</span>
                    </el-row>
                    <el-row class="line-text">
                        <span>切片用途：{{ file.slicePurposeName }}</span>
                    </el-row>
                    <el-row class="line-text">
                        <span>扫描号：{{ file.scannerSerialNumber }}</span>
                    </el-row>
                    <el-row class="line-text">
                        <span>扫描仪号：{{ file.scannerNumber }}</span>
                    </el-row>
                    <el-row class="line-text">
                        <span>扫描倍率：{{ file.level }}</span>
                    </el-row>
                    <el-row class="line-text">
                        <span>扫描时间：{{ file.updateTime }}</span>
                    </el-row>
                    <el-row class="line-text">
                        <span>切片质量：{{ file.biopsyQuality }}</span>
                    </el-row>
                    <el-row class="line-text">
                        <span>扫描仪品牌型号：{{ file.scannerBrandModel }}</span>
                    </el-row>
                    <el-row class="line-text">
                        <span>扫描清晰度：{{ file.scanDefinition }}</span>
                    </el-row>
                    <el-row class="line-text">
                        <span>病理编号：{{ file.pathologyId }}</span>
                    </el-row>
                    <el-row class="line-text">
                        <span>扫描员：{{ file.createUserName }}</span>
                    </el-row>
                    <el-row class="line-text">
                        <span>上传时间：{{ file.createTime }}</span>
                    </el-row>
                    <el-row class="line-text">
                        <span>切片描述：{{ file.description }}</span>
                    </el-row>
                    <el-row class="line-text">
                        <span>医院名称：{{ file.sliceHospitalName }}</span>
                    </el-row>
                    <el-row class="line-text">
                        <span>分院名称：{{ file.branchName }}</span>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
        <div v-show="isShow == true">
            <base-table
                ref="diagnosisTable"
                :data="diagnosisTable.data"
                :header="diagnosisTable.header"
                :operation="diagnosisTable.operation"
                :pageInfo="diagnosisTable.pageInfo"
                @handleClick="diagnosisTableButtonClick"
                @pageJumpTo="diagnosisTablePageJumpTo"
                @sizeChange="diagnosisTableSizeChange"
            >
            </base-table>
        </div>
    </div>
</template>

<script>
import BaseTable from '@templates/components/BaseTable';
import { itemsPerPage } from '@/client/libs/util';

export default {
    name: 'DiagnosisDetailPathologyList',
    components: {
        BaseTable,
    },
    props: ['diagnosis'],
    data() {
        return {
            pathologyFiles: [],
            ImageServiceURL: process.env.ImageServiceURL,
            isShow: false,
            diagnosisTable: {
                data: [],
                header: [
                    {
                        label: '病理编号',
                        prop: 'pathologyId',
                        width: '107',
                    },
                    {
                        label: '分院名称',
                        prop: 'branchName',
                        width: '107',
                    },
                    {
                        label: '切片标签',
                        width: '140',
                        // isRender: true,
                        // render: (h, params) => {
                        //     return h('img', {
                        //         attrs: {
                        //             src:
                        //                 this.ImageServiceURL +
                        //                 params.row.labelUrl,
                        //         },
                        //         style: {
                        //             width: '140px',
                        //             height: '65px',
                        //         },
                        //     });
                        // },
                    },
                    {
                        label: '缩略图',
                        width: '140',
                        isRender: true,
                        render: (h, params) => {
                            return h('img', {
                                attrs: {
                                    src:
                                        this.ImageServiceURL +
                                        params.row.previewUrl,
                                },
                                style: {
                                    width: '140px',
                                    height: '65px',
                                },
                                on: {
                                  click: () => {
                                    // 这里通常做路由跳转，弹窗显示，发送请求等
                                    this.exclude(params.row)
                                  }
                                }
                              });
                        },
                    },
                    {
                        label: '切片类别',
                        prop: 'sliceCategoryName',
                        width: '107',
                    },
                    {
                        label: 'AI分析结果',
                        width: '107',
                    },
                    {
                        label: '切片质量',
                        prop: 'biopsyQuality',
                        width: '107',
                    },
                    {
                        label: '清晰度',
                        prop: 'scanDefinition',
                        width: '107',
                    },
                    {
                        label: '切片大小',
                        prop: 'fileSizeStr',
                        width: '107',
                    },
                    {
                        label: '扫描批次',
                        prop: 'biopsyHistoryId',
                        width: '107',
                    },
                    {
                        label: '扫描倍率',
                        prop: 'level',
                        width: '107',
                    },
                    {
                        label: '上传时间',
                        prop: 'createTime',
                        width: '138',
                    },
                    {
                        label: '扫描机器号',
                        prop: 'scannerSerialNumber',
                        width: '150',
                    },
                    {
                        label: '切片所属医院',
                        prop: 'sliceHospitalName',
                        width: '120',
                    },
                ],

                operation: [
                    {
                        label: '查看切片',
                        functionKey: 'watchSlice',
                    },
                ],
                pageInfo: {
                    page: 1,
                    size: itemsPerPage.get(),
                    total: 0,
                },
            },
        };
    },
    methods: {
        exclude(val) {
            const { state } = this.$store;
            const { href } = this.$router.resolve({
                name: 'Viewer',
                path: '/Viewer',
                query: {
                    fileName: val.newFilename,
                    originFilename: val.originFilename,
                    pathologyId: this.diagnosis.pathologyId,
                    biopsyId: val.id,
                    authorization: state.authorization,
                    userId: state.user.id,
                    pDiagnosisType: sessionStorage.getItem('pDiagnosisType'),
                },
            });
            const width = window.screen.availWidth + 10;
            const height = window.screen.availHeight + 10;
            window.open(
                href,
                'doctorWorkstation',
                `location=no,width=${width},height=${height}`
            );
            console.log('1111-----');
        },
        watchSlice(row) {
            const { state } = this.$store;
            const { href } = this.$router.resolve({
                name: 'Viewer',
                path: '/Viewer',
                query: {
                    fileName: row.newFilename,
                    originFilename: row.originFilename,
                    pathologyId: this.diagnosis.pathologyId,
                    biopsyId: row.id,
                    authorization: this.$store.state.authorization,
                    userId: state.user.id,
                    pDiagnosisType: sessionStorage.getItem('pDiagnosisType'),
                },
            });
            const width = window.screen.availWidth + 10;
            const height = window.screen.availHeight + 10;
            window.open(
                href,
                'doctorWorkstation',
                `location=no,width=${width},height=${height}`
            );
        },
        switchState() {
            if (this.isShow === true) {
                this.isShow = false;
            } else {
                this.isShow = true;
            }
        },
        diagnosisTableButtonClick(functionKey, row) {
            this[functionKey](row);
        },
        diagnosisTablePageJumpTo(val) {
            this.diagnosisTable.pageInfo.page = val;
            console.log('page', val);
            this.spliceList();
        },
        diagnosisTableSizeChange(val) {
            this.diagnosisTable.pageInfo.size = val;
            console.log('size', val);
            this.spliceList();
        },
        spliceList() {
            let page = this.diagnosisTable.pageInfo.page - 1;
            let size = this.diagnosisTable.pageInfo.size;
            console.log('截取page', page);
            console.log('截取size', size);
            this.diagnosisTable.data = this.pathologyFiles.slice(
                page * size,
                page * size + size
            );
            console.log('截取后的list', this.diagnosisTable.data);
        },
        // 图片旋转
        imagePinwheel(e,index) {
            this.pathologyFiles[index].deg += 90;
            this.$refs['imgLabel'+index][0].style.transform = `rotate(${this.pathologyFiles[index].deg}deg)`;
            
        },
    },
    mounted() {
        if (this.diagnosis.biopsyList.length > 0) {
            this.diagnosis.biopsyList.forEach((element) => {
                element.deg=0
                element.fileSizeStr += 'MB';
                this.pathologyFiles.push(element);
                console.log('this.pathologyFiles=======',this.pathologyFiles)
            });
            this.diagnosisTable.pageInfo.total =
                this.diagnosis.biopsyList.length;
            this.spliceList();
        }
    },
    computed: {},
};
</script>

<style scoped>
.filter {
    border-bottom: #f4f4f4 1px;

    padding: 10px 30px;

    background: #ffffff;
}

.header {
    margin-top: 20px;

    font-size: 14px;
}

.item {
    margin-top: 10px;
    margin-left: 15px;

    align-items: center;
}

.image {
    height: 138px;

    width: 138px;

    margin-left: 15px;
}

.grid {
    float: right;
    font-size: 30px;
    cursor: pointer;
}
.rotate90{transform: rotate(90deg);}
::v-deep .el-image-viewer__close{color: #fff;}

.colorStatus {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  border-radius: 20px;
}

.greenStatus {
  background-color: green;
}

.redStatus {
  background-color: red;
}

.greyStatus {
  background-color: grey;
}
</style>
